<template>
  <div class="wrap">
    <scroll-view
      @scrolltolower="handleLoadMore"
      @refresherrefresh="handleRefresh"
      :refresher-triggered="scrollRefreshshTrigger"
      :refresher-enabled="true"
      :scroll-y="true"
      class="scroll-list">
      <view class="container">
        <uni-list>
          <uni-list-item
            v-for="item in dataList"
            :key="item.id"
            :title="item.audioName"
            :rightText="item.createTime"
            :show-arrow="true"
            :clickable="true"
            @click="handleEdit(item)" />
        </uni-list>
        <div v-if="!dataList.length" class="d-text-center d-text-btns">
          <span @click="handleAdd" class="d-text-lightgray">还未有数据，点击添加</span>
        </div>
      </view>
    </scroll-view>
  </div>
</template>

<script>
	import { parseTime } from '@/utils/ruoyi.js'
  import audioSer from '@/api/service/audio.js'
  export default {
    data() {
      return {
        // 下拉刷新标识
        scrollRefreshshTrigger: false,
        // 当前的数据列表
        dataList: [],
        // 分页参数
        pager: {
          total: 0,
          pageCount: 0,
          pageIndex: 1,
          pageSize: 20
        }
      }
    },

		onNavigationBarButtonTap () {
			this.handleAdd()
		},
		onPullDownRefresh() {
			this.initData()
			setTimeout(function () {
				uni.stopPullDownRefresh()
			}, 1000)
		},
  
    onLoad() {
			this.initData()
      uni.$on('onRefreshAudioList', () => {
        this.initData()
      })
    },

    onUnload() {
      uni.$off('onRefreshAudioList')
    },
  
    methods: {
			initData () {
				this.handleSearch()
			},
      // 初始化列表
      loadDataList () {
        let params = {}
        // 查询列表
        audioSer.queryListByPage(params, {
          limit: {
            pageIndex: this.pager.pageIndex,
            pageSize: this.pager.pageSize
          }
        }).then(res => {
          this.pager.total = res.page?.total || 0
          this.pager.pageCount = Math.ceil(this.pager.total / this.pager.pageSize)
          let data = Array.isArray(res.data) ? res.data : []
          this.dataList = this.dataList.concat(data)
        })
      },
      // 搜索数据
      handleSearch () {
        this.pager.pageIndex = 1
        this.dataList = []
        // 查询列表数据
        this.loadDataList()
      },
      // 下拉刷新
      handleRefresh () {
        this.scrollRefreshshTrigger = true
        this.handleSearch()
        setTimeout(() => {
          this.scrollRefreshshTrigger = false
        }, 1000)
      },
      // 加载更多
      handleLoadMore () {
        this.pager.pageIndex += 1
        if (this.pager.pageIndex > this.pager.pageCount) {
          return true
        }
        this.loadDataList()
      },
			handleAdd () {
				this.$tab.navigateTo('/pages/audio/edit')
			},
			handleEdit (item) {
				this.$tab.navigateTo('/pages/audio/play?id=' + item.id) 
			},
			simpleFormat(time) {
				return parseTime(time)
			}
    }
  }
</script>

<style lang="scss">
.wrap {
  overflow: hidden;
  height: 100%;
  background: #f5f5f5;
  .scroll-list {
    height: calc(100vh - var(--window-top) - var(--window-bottom));
  }
}
</style>
